"use client";
import React from "react";
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import { forwardRef, useImperativeHandle } from "react";
import * as z from "zod";
import { zodResolver } from "@hookform/resolvers/zod";
import { useForm } from "react-hook-form";
import { RegisterSchema } from "@/schemas";
export interface RegisterFormRef {
  onSubmit: () => void;
}

interface FormProps {
  handleSubmit: (values: z.infer<typeof RegisterSchema>) => void;
}

const RegisterForm = forwardRef<RegisterFormRef, FormProps>(
  ({ handleSubmit }, ref) => {
    const form = useForm<z.infer<typeof RegisterSchema>>({
      resolver: zodResolver(RegisterSchema),
      defaultValues: {
        name: "",
        password: "",
        email: "",
      },
    });

    useImperativeHandle(ref, () => ({
      onSubmit: async () => {
        try {
          const isValid = await form.trigger();
          if (isValid) {
            const values = form.getValues();
            handleSubmit(values);
          } else {
            console.log("Validation failed");
          }
        } catch (error) {
          console.error("Error during form submission:", error);
        }
      },
    }));
    return (
      <Form {...form}>
        <form className="space-y-8 max-w-md mx-auto p-6 bg-white rounded-xl shadow-md">
          <FormField
            control={form.control}
            name="name"
            render={({ field }) => (
              <FormItem className="flex flex-col space-y-2">
                <FormLabel
                  htmlFor="id_name"
                  className="text-sm font-medium text-gray-700"
                >
                  用户名
                </FormLabel>
                <FormControl>
                  <Input
                    id="id_name"
                    {...field}
                    className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition duration-200"
                    placeholder="请输入用户名"
                  />
                </FormControl>
                <FormMessage className="text-sm text-red-500" />
              </FormItem>
            )}
          />
          <FormField
            control={form.control}
            name="email"
            render={({ field }) => (
              <FormItem className="flex flex-col space-y-2">
                <FormLabel
                  htmlFor="id_email"
                  className="text-sm font-medium text-gray-700"
                >
                  邮箱
                </FormLabel>
                <FormControl>
                  <Input
                    id="id_email"
                    {...field}
                    className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition duration-200"
                    placeholder="请输入邮箱地址"
                  />
                </FormControl>
                <FormMessage className="text-sm text-red-500" />
              </FormItem>
            )}
          />
          <FormField
            control={form.control}
            name="password"
            render={({ field }) => (
              <FormItem className="flex flex-col space-y-2">
                <FormLabel
                  htmlFor="id_password"
                  className="text-sm font-medium text-gray-700"
                >
                  密码
                </FormLabel>
                <FormControl>
                  <Input
                    type="password"
                    id="id_password"
                    {...field}
                    className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition duration-200"
                    placeholder="请输入密码"
                  />
                </FormControl>
                <FormMessage className="text-sm text-red-500" />
              </FormItem>
            )}
          />
        </form>
      </Form>
    );
  },
);

RegisterForm.displayName = "RegisterForm";
export { RegisterForm };
